territorylist = {

	render: function() 
	{	
		var Territory = Backbone.Model.extend({});
	
		var PageableTerritories = Backbone.PageableCollection.extend({
			  model: Territory,
			  url: "backgridexample/pageable-territories.json",
			  state: {
			    pageSize: 5
			  },
			  mode: "client" // page entirely on the client side
			});
		
		var pageableTerritories = new PageableTerritories();
		
		var DeleteCell = Backgrid.Cell.extend({
		    template: _.template('<button>Delete</button>'),
		    events: {
		      "click": "deleteRow"
		    },
		    deleteRow: function (e) {
		      console.log("Hello, Master, deleteing row...");
		      e.preventDefault();
		      this.model.collection.remove(this.model);
		    },
		    render: function () {
		      this.$el.html(this.template());
		      this.delegateEvents();
		      return this;
		    }
		});
	
		var EditCell = Backgrid.Cell.extend({
		    template: _.template('<button>Edit</button>'),
		    events: {
		      "click": "editRow"
		    },
		    editRow: function (e) {
		      console.log("Hello, Master, edit row...");
		      e.preventDefault();
		      //this.model.collection.remove(this.model);
		    },
		    render: function () {
		      this.$el.html(this.template());
		      this.delegateEvents();
		      return this;
		    }
		});
	
		var columns = [{
		    name: "id", // The key of the model attribute
		    label: "ID", // The name to display in the header
		    editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
		    // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
		    cell: Backgrid.IntegerCell.extend({
		      orderSeparator: ''
		    })
		  }, {
		    name: "name",
		    label: "Name",
		    editable: false,
		    // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
		    cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
		  }, {
		    name: "pop",
		    label: "Population",
		    cell: "integer" // An integer cell is a number cell that displays humanized integers
		  }, {
		    name: "percentage",
		    label: "% of World Population",
		    editable: false,
		    cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
		  }, {
		    name: "date",
		    label: "Date",
		    cell: "date"
		  }, {
		    name: "url",
		    label: "URL",
		    cell: "uri" // Renders the value in an HTML anchor element
		  }, {
			name : "delete",
			label : "",
			cell : DeleteCell
		},{
			name : "edit",
			label : "",
			cell : EditCell
		}];
	
		// Set up a grid to use the pageable collection
		var pageableGrid = new Backgrid.Grid({
		  columns: [{
		    // enable the select-all extension
		    name: "",
		    cell: "select-row",
		    headerCell: "select-all"
		  }].concat(columns),
		  collection: pageableTerritories
		});
	
		// Render the grid
		var $datalist = $("#datalist");
		$datalist.append(pageableGrid.render().el)
	
		// Initialize the paginator
		var paginator = new Backgrid.Extension.Paginator({
		  collection: pageableTerritories
		});
	
		// Render the paginator
		$datalist.after(paginator.render().el);
	
		// Initialize a client-side filter to filter on the client
		// mode pageable collection's cache.
		var filter = new Backgrid.Extension.ClientSideFilter({
		  collection: pageableTerritories,
		  fields: ['name']
		});
	
		// Render the filter
		$datalist.before(filter.render().el);
	
		// Add some space to the filter and move it to the right
		$(filter.el).css({float: "right", margin: "20px"});
	
		// Fetch some data
		pageableTerritories.fetch({reset: true});
	}
};

